<template>
	<PopupTemplate className="bargin_popup_container" type="2" :closeable="false" :visible="visible"
		@update:visible="handleUpdate">
		<image class="pa width_70 height_70 l_0 r_0 mlr_auto" style="top:-70rpx" src="@/static/images/success.png">
		</image>
		<view class="pa t_19 r_19">
			<u-icon name="close" color="#999" size="32rpx" @click.stop="$emit('update:visible',false)"></u-icon>
		</view>
		<view class="p_16">
			<view class="fc fz_16 mt_46">
				帮好友砍价<text class="fc_primary">{{data.bargainirgPrice}}</text>元
			</view>
			<view class="w100 mt_32 box plr_11 pr">
				<view class="tip" :style="[tipStyle]">
					{{percent}}%
				</view>
				<view id="progress_wrap">
					<u-line-progress :percentage="percent"
						activeColor="linear-gradient(90deg, #FA4904 0%, #FF9000 100%)" inactiveColor="#FFD7C8"
						:showText="false"></u-line-progress>
				</view>
			</view>
			<view class="fc mt_16 fz_12 fc_666">
				您也可以邀请砍价低价拿喔，快去挑选吧~
			</view>
			<button class="w100 custom_btn primary lh_40 br_27 mt_14 fz_14" @click="handleJoin">我也要参与</button>
		</view>
	</PopupTemplate>
</template>

<script>
	import PopupTemplate from '@/components/PopupTemplate.vue'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => ({})
			}
		},
		components: {
			PopupTemplate
		},
		computed: {
			tipStyle() {
				return {
					transform: `translateX(${Math.ceil(this.percent/100*this.progressWidth)}px)`
				}
			}
		},
		data() {
			return {
				percent: 0,
				progressWidth: 0,
			};
		},
		mounted() {},
		watch: {
			visible(newVal) {
				if (newVal) {
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).select('#progress_wrap').boundingClientRect(data => {
							this.progressWidth = data.width
							// this.percent = Number((this.data.bargainirgPrice / (this.data
							// 	.bargainirgPrice + this.data.residuePrice) * 100).toFixed(2))
							this.percent = this.data.bargainirgRatio
							console.log('this.progressWidth', data)
						}).exec()
					})
				}
			}
		},
		methods: {
			handleUpdate(e) {
				console.log(e, 111)
				this.$emit('update:visible', e)
			},
			handleJoin() {
				uni.navigateTo({
					url: `/pages/goods/pages/bargain`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip {
		position: absolute;
		top: -48rpx;
		left: -22rpx;
		// transform: translateX(0);
		transition: all 0.3s ease-in-out;
		width: 80rpx;
		line-height: 36rpx;
		text-align: center;
		background: #FF8A01;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #fff;

		&::after {
			content: '';
			position: absolute;
			bottom: -20rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 0;
			height: 0;
			border-width: 10rpx 12rpx;
			border-style: solid;
			border-color: #FF8A01 transparent transparent transparent;
		}
	}
</style>